<template>
    <view class="afterSales pb-100">
        <Navigation title="售后申请" background="#fff" />
        <view class="ph-40 background-white pb-36">
            <view class="f h-112 ai-c border" @click="changeType">
                <view class="fs-32 text-color4 mr-40">申诉类型</view>
                <view class="f ai-c f1 jc-s-b">
                    <view> <u--input placeholder="请选择" border="none" v-model="wayName" fontSize="16" readonly></u--input></view>
                    <u-icon name="arrow-right" color="#999999" size="16"></u-icon>
                </view>
            </view>
            <view class="fs-32 text-color4 mt-32">申诉描述 </view>
            <view class="w-f h-324 b-8 mt-24 remark ph-32 pv-28">
                <u--textarea v-model="params.applyReason" placeholder="请输入" border="none" count maxlength="200"></u--textarea>
            </view>
        </view>
        <view class="mt-24 background-white ph-40 pv-32">
            <view class="fs-32 text-color4 mb-24">图片上传</view>
            <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="9" width="79" height="79">
                <view class="w-158 h-158 f ai-c jc-c b-8 upload">
                    <image src="http://cwht.ricecs.cn/app/novice/add.png" class="w-66 h-66"></image>
                </view>
            </u-upload>
        </view>
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
            <view class="f ai-c ph-40 h-136 jc-s-b">
                <view class="w-327 h-96 b-96 f ai-c jc-c fs-32 fw-600 text-color2 cancel" @click="back">取消</view>
                <view class="w-327 h-96 b-96 f ai-c jc-c fs-32 fw-600 text-color5 submit" @click="submit">确定</view>
            </view>
        </view>
        <!-- 类型 -->
        <u-popup :show="show" round="12">
            <view>
                <scroll-view scroll-y="true" style="max-height: 500rpx">
                    <view
                        class="list f ai-c jc-c h-112 w-f fs-32 fw-600 text-color4"
                        :class="index === curt ? 'active' : ''"
                        v-for="(item, index) in wayList"
                        :key="index"
                        @click="selectWay(index)"
                        >{{ item.label }}</view
                    >
                </scroll-view>
                <view class="list-cancel f ai-c jc-c h-112 w-f fs-32 fw-600 text-color4" @click="show = false">取消</view>
            </view>
        </u-popup>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { dictDataType } from '@/services/api/dict';
import { afterSaleBatchCreate, orderGetDetail } from '@/services/api/shop/order';
import { getUploadUrl } from '@/utils/env';
const fileList = ref<any[]>([]);
const show = ref(false);
const wayList = ref([]);
const wayName = ref();
const curt = ref<number | null>(null);
const detail = ref();
const id = ref();
const params = ref({
    orderItemId: '',
    way: '',
    refundPrice: '',
    applyReason: '',
    applyPicUrls: [],
});
const orderItemIds = ref([]);
onLoad((options: any) => {
    id.value = options.id;
    getWay();
    getDetail();
});
async function getDetail() {
    const { data } = await orderGetDetail({ id: id.value });

    detail.value = data;
}
function back() {
    uni.navigateBack();
}
function deletePic(event) {
    fileList.value.splice(event.index, 1);
}
//提交
async function submit() {
    if (params.value.way == '') {
        uni.showToast({
            title: '请选择申诉类型',
            icon: 'none',
        });
        return;
    }
    if (params.value.applyReason == '') {
        uni.showToast({
            title: '请填写申诉描述',
            icon: 'none',
        });
        return;
    }
    params.value.applyPicUrls = fileList.value.map((item) => {
        return item.url;
    });
    const createReqVOList: any[] = [];
    detail.value.items.forEach((item) => {
        createReqVOList.push({
            orderItemId: item.id,
            way: params.value.way,
            refundPrice: item.payPrice,
            applyReason: params.value.applyReason,
            applyPicUrls: params.value.applyPicUrls,
        });
    });
    await afterSaleBatchCreate({ createReqVOList: createReqVOList });
    uni.showToast({
        title: '提交成功',
    });
    setTimeout(() => {
        uni.navigateBack();
    }, 1000);
}
//选择类型
function selectWay(index: number) {
    curt.value = index;
    wayName.value = wayList.value[curt.value].label;
    params.value.way = wayList.value[curt.value].value;
    show.value = false;
}
function changeType() {
    show.value = true;
}
async function getWay() {
    const { data } = await dictDataType({ type: 'after_sale_way' });
    wayList.value = data;
}
// 新增图片
async function afterRead(event: any) {
    // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList.value.length;
    lists.map((item) => {
        fileList.value.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        });
    });
    for (let i = 0; i < lists.length; i++) {
        const result = await uploadFilePromise(lists[i].url);
        let item = fileList.value[fileListLen];
        fileList.value.splice(
            fileListLen,
            1,
            Object.assign(item, {
                status: 'success',
                message: '',
                url: result,
            })
        );
        fileListLen++;
    }
}
function uploadFilePromise(url: string) {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: getUploadUrl(), // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            success: (res) => {
                setTimeout(() => {
                    let data = JSON.parse(res.data);
                    resolve(data.data);
                }, 1000);
            },
        });
    });
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.afterSales {
    min-height: 100vh;
    background: #f5f5f5;
    .list {
        border-bottom: 1px solid #f5f5f5;
    }
    .list-cancel {
        border-top: 24rpx solid #f5f5f5;
    }
    .active {
        color: #fabb3c;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        .submit {
            background: #fabb3c;
        }
        .cancel {
            background: #f5f5f5;
        }
    }

    .upload {
        border: 1rpx solid #dddddd;
    }
    ::v-deep .u-upload__wrap__preview {
        margin: 0 10rpx 10rpx 0 !important;
    }
    ::v-deep .u-upload__wrap__preview:nth-child(4n) {
        margin: 0 0 10rpx 0 !important;
    }
    .background-white {
        background: #fff;
    }
    ::v-deep .u-textarea__count {
        background: #f8f8f8 !important;
        color: #cccccc !important;
        font-size: 24rpx !important;
    }

    ::v-deep .u-textarea {
        padding: 0;
    }
    ::v-deep .u-textarea__field {
        background: #f8f8f8;
        height: 220rpx !important;
    }
    .remark {
        background: #f8f8f8;
    }
    .border {
        border-bottom: 1px solid #f8f8f8;
    }
}
</style>
